<template>
    <div class="json-element">
        <editor v-model="json" language="javascript" width="95%" height="300px"></editor>

        <operation class="operation">
            <q-btn slot="right" color="blue" @click="convertClick">CONVERT</q-btn>
        </operation>

        <p class="title">TABLE:</p>
        <editor v-model="table" language="html" width="95%" height="300px"></editor>
        <space height="30px"></space>

        <p class="title">INPUT:</p>
        <editor v-model="input" language="html" width="95%" height="300px"></editor>
        <space height="30px"></space>

        <p class="title">RULE:</p>
        <editor v-model="rule" language="javascript" width="95%" height="300px"></editor>
        <space height="30px"></space>

    </div>
</template>

<script type="text/ecmascript-6">
  import Editor from "../../components/editor/Editor";
  import Space from "../../components/common/Space";
  import Operation from "../../components/common/Operation";
  import convert2Table from "./convert2Table";
  import convert2Input from "./convert2Input";
  import convert2Rule from "./convert2Rule";

  /**
   * @author 白雨浓
   * @date 2019/1/14 14:12
   *
   *
   * Json 转 Element UI
   **/
  export default {
    name: 'json-element',
    components: {Operation, Space, Editor},
    data() {
      return {
        json: '',
        table: '',
        input: '',
        rule: '',
      }
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      convertClick() {
        this.table = convert2Table(this.json);
        this.input = convert2Input(this.json);
        this.rule = convert2Rule(this.json);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .json-element {
        padding 20px
    }

    .operation {
        width 95%
        margin 10px auto
    }

    .title {
        width 95%
        margin auto
        padding 3px
        color #ddd
    }
</style>
